import { Swiper, Footer, NavBar } from 'antd-mobile'
import { useEffect } from 'react'
import useScorll from '@/hooks/useScorll'
import { useState } from 'react'
import './index.scss'
import '@/styles/common.scss'
import Time from '@/components/Time/index'
import WebSource from '@/components/WebSource/index'
import apis from '@/apis'
const Home: React.FC = () => {
  const [footerText] = useState(
    `This project and copyright are from ©${new Date().getFullYear()} YANG SHIQI.`
  )
  const { scrollToTop } = useScorll()
  useEffect(() => {
    scrollToTop()
  }, [])
  const [infoData, setInfoData]: any = useState(null)
  useEffect(() => {
    async function queryInfo() {
      const res = await apis.getInfoApi()
      setInfoData(res)
    }
    queryInfo()
  }, [])
  return (
    <div style={{ paddingBottom: 80 }}>
      <NavBar
        className="navBar"
        style={{ backgroundColor: '#333' }}
        back={null}
      >
        首页
      </NavBar>
      {infoData && (
        <Swiper autoplay loop>
          {infoData.bannerImgList.map((item, index) => (
            <Swiper.Item key={index}>
              <img style={{ height: 200, width: '100%' }} src={item} />
            </Swiper.Item>
          ))}
        </Swiper>
      )}
      <div style={{ padding: 10, textAlign: 'justify' }}>
        {infoData &&
          infoData.intro.map((item, index) => {
            return (
              <div key={index}>
                <div className="tips">{item.title}</div>
                {item.content.map((it, id) => (
                  <div className="text" key={id}>
                    {it}
                  </div>
                ))}
              </div>
            )
          })}
      </div>
      {infoData && <WebSource></WebSource>}
      <div className="time_text">【距离退休还有👇】</div>
      <Time></Time>
      <div className="logo" />
      <Footer content={footerText}></Footer>
    </div>
  )
}
export default Home
